<form name="form" ng-init="vm.init();refresh();" novalidate ng-submit="vm.sendRequest(form.$valid, vm.sendType)">
  <div class="row x-page-header">
    <div class="col-md-12">
      <div class="x-page-title">HTTP 请求发送</div>
      <div class="pull-right">
        <div class="btn-group x-btn-list">
          <button type="submit" class="btn btn-primary" ng-disabled="form.$invalid || !vm.completed || !vm.dataParsable"
              ng-click="vm.sendType = 'send'">发送</button>
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
              ng-disabled="form.$invalid || !vm.completed || !vm.dataParsable">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><button type="submit" class="btn btn-default btn-block"
                ng-click="vm.sendType = 'download'">发送和下载</button></li>
          </ul>
        </div>
        <button id="copy" class="btn btn-success" type="button" data-clipboard-action="copy"
            ng-disabled="vm.respBody == null">复制</button>
        <button class="btn btn-danger" type="button" ng-click="vm.reset()">重置</button>
      </div>
    </div>
  </div>
  <div class="row x-page-body">
    <div class="col-md-7">
      <fieldset>
        <legend>请求数据
          <font color="green">（简化的网页版<a href="https://www.getpostman.com" target="_blank">Postman</a>工具）</font>
        </legend>
        <div class="x-page-scope">
          <div class="x-http">
            <div class="x-http-preference">
              <div class="input-group">
                <span class="input-group-addon">
                  <select ng-model="vm.method" ng-change="vm.changeMethod(vm.method)">
                    <option value="GET">GET</option>
                    <option value="POST">POST</option>
                    <option value="PUT">PUT</option>
                    <option value="DELETE">DELETE</option>
                    <option value="HEAD">HEAD</option>
                    <option value="OPTIONS">OPTIONS</option>
                  </select>
                </span>
                <input type="text" class="form-control" name="url" ng-model="vm.url" placeholder="URL" autofocus
                    required pattern="^http(s)?://[\w-\.]+(:\d+)?(/[\w-./?%&=]*)?(?:#(.*))?$">
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="vm.editParams()"
                      ng-disabled="!vm.urlParsable">Params</button>
                </span>
              </div>
            </div>
            <div class="form-group">
              <!-- margin-bottom: 15px -->
            </div>
            <uib-tabset active="vm.activeTab" type="tabs">
              <uib-tab index="0" heading="Authorization"></uib-tab>
              <uib-tab index="1" heading="Headers({{vm.headerParams.length-1}})">
                <div datatable dt-type="'header'" dt-inputs="vm.headerParams"></div>
              </uib-tab>
              <uib-tab index="2" heading="Body" disable="vm.method == 'GET' || vm.method == 'HEAD'">
                <div class="form-group">
                  <label class="radio-inline" ng-repeat="dataType in vm.dataTypes">
                    <input type="radio" name="data-type" value="{{dataType}}" ng-model="vm.dataType"> {{dataType}}
                  </label>
                  <div class="radio-inline btn-group" style="margin-left:0" ng-show="vm.dataType == 'raw'">
                    <a href="javascript:void(0)" data-toggle="dropdown">{{vm.rawDataLabel}}
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li ng-repeat="rawDataType in vm.rawDataTypes"
                          ng-click="vm.rawDataType = rawDataType.value; vm.rawDataLabel = rawDataType.label"
                          ng-class="{'active': rawDataType.value == vm.rawDataType}">
                          <a href="javascript:void(0)">{{rawDataType.label}}</a></li>
                    </ul>
                  </div>
                </div>
                <div id="form-data" ng-show="vm.dataType == 'form-data'">
                  <div datatable dt-type="'form-data'" dt-inputs="vm.formDataParams"></div>
                </div>
                <div id="x-www-form-urlencoded" ng-show="vm.dataType == 'x-www-form-urlencoded'">
                  <div datatable dt-type="'form'" dt-inputs="vm.formParams"></div>
                </div>
                <div id="raw" class="x-request" ng-show="vm.dataType == 'raw'">
                  <div class="x-editor">
                    <pre id="data-editor"></pre>
                  </div>
                </div>
                <div id="binary" class="form-group" ng-if="vm.dataType == 'binary'">
                  <input type="file" name="file">
                </div>
              </uib-tab>
              <uib-tab index="3" heading="Cookies">
                <textarea class="form-control" ng-model="vm.cookies" rows="10"
                    placeholder="cookieName=cookieValue（多个Cookie以换行隔开）"></textarea>
              </uib-tab>
            </uib-tabset>
          </div>
        </div>
      </fieldset>
    </div>
    <div class="col-md-5">
      <fieldset>
        <legend>响应结果</legend>
        <div class="x-page-scope">
        <uib-tabset active="vm.respActiveTab" type="tabs">
            <uib-tab index="0" heading="Body">
              <pre class="x-response x-output" id="data-viewer"></pre>
            </uib-tab>
            <uib-tab index="1" heading="Cookies">
              <p ng-repeat="cookie in vm.respCookies track by $index">{{cookie}}</p>
            </uib-tab>
            <uib-tab index="2" heading="Headers({{vm.respHeaders.length}})">
              <p ng-repeat="header in vm.respHeaders">
                <b>{{header.name}}: </b>{{header.value}}
              </p>
            </uib-tab>
          </uib-tabset>
        </div>
      </fieldset>
    </div>
  </div>
</form>
